<script setup lang="ts">
import { ElButton, ElInput, Sort, ElTable, ElTableColumn } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { getSysMenusListApi, delSysMenusListApi } from '@/api/sys-menu'
import { useTable } from '@/hooks/web/useTable'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt'
import { Search, SearchItem } from '@/components/Search'
import { SysMenu } from '@/api/sys-menu/types'
import { boolean2string, formatDate } from '@/utils/index'

defineOptions({
  name: 'SysMenu'
})

const { push } = useRouter()

const conditions = reactive({
  code: '',
  name: ''
})

const defaultSort = ref<Sort>({
  prop: 'sequence',
  order: 'ascending'
})

const { tableObject, methods } = useTable<SysMenu>({
  getListApi: getSysMenusListApi,
  delListApi: delSysMenusListApi,
  defaultSort: defaultSort.value
})

const { getList, setSearchParams } = methods

setSearchParams(conditions)

useEmitt({
  name: 'getList',
  callback: (type: string) => {
    if (type === 'add') {
      tableObject.currentPage = 1
    }
    getList()
  }
})

const AddAction = () => {
  push('/system/sys-menu-add')
}

const EditAction = (row: SysMenu) => {
  push(`/system/sys-menu-edit/id/${row.id}`)
}

const delLoading = ref(false)

const delData = async (row: SysMenu) => {
  tableObject.currentRow = row
  const { delList } = methods
  delLoading.value = true
  await delList([tableObject.currentRow?.id as string], false).finally(() => {
    delLoading.value = false
  })
}

const load = (row: SysMenu, _: unknown, resolve: (data: SysMenu[]) => void) => {
  resolve(row.children)
}

const menuTypeLabel = (menu_type: string) => {
  if (menu_type === 'M') {
    return '目录'
  } else if (menu_type === 'C') {
    return '菜单'
  } else if (menu_type === 'F') {
    return '按钮'
  }

  return menu_type
}
</script>

<template>
  <Search :model="conditions" @search="setSearchParams" @reset="setSearchParams">
    <SearchItem label="代码" prop="code">
      <ElInput v-model="conditions.code" maxlength="50" clearable />
    </SearchItem>
    <SearchItem label="名称" prop="name">
      <ElInput v-model="conditions.name" maxlength="200" clearable />
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>列表</div>
      <div class="flex flex-row items-center">
        <ElButton :icon="Plus" type="primary" @click="AddAction">新建</ElButton>
        <Icon icon="ep:refresh-right" class="mr-8px ml-8px cursor-pointer" />
      </div>
    </div>

    <ElTable
      :data="tableObject.tableList"
      stripe
      row-key="id"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <ElTableColumn prop="title" label="菜单名称" width="180" show-overflow-tooltip />
      <ElTableColumn prop="icon" label="图标" width="80">
        <template #default="{ row }">
          <Icon v-if="row.icon" :icon="row.icon" />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="menu_type" label="菜单类型" width="100" show-overflow-tooltip>
        <template #default="{ row }">
          {{ menuTypeLabel(row.menu_type) }}
        </template>
      </ElTableColumn>
      <ElTableColumn prop="sequence" label="排序" width="80" show-overflow-tooltip />
      <ElTableColumn prop="path" label="路由" width="180" show-overflow-tooltip />
      <ElTableColumn prop="component" label="组件路径" width="auto" show-overflow-tooltip />
      <ElTableColumn prop="permissions" label="权限标识" width="auto" show-overflow-tooltip />
      <ElTableColumn prop="disabled" label="禁用" width="80" show-overflow-tooltip>
        <template #default="{ row }">
          {{ boolean2string(row.disabled) }}
        </template>
      </ElTableColumn>
      <ElTableColumn prop="updated_at" label="更新时间" width="180" show-overflow-tooltip>
        <template #default="{ row }">
          {{ formatDate(row.updated_at, 'YYYY-MM-DD HH:mm:ss') }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作" width="120" header-align="center" align="center">
        <template #default="{ row }">
          <ElButton type="primary" link size="small" @click="EditAction(row)"> 编辑 </ElButton>
          <ElButton type="danger" link size="small" @click="delData(row)"> 删除 </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>
